<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="Author" content="setycyas">
  <link rel="stylesheet" href="../bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../style.css" type="text/css" />
  <script src="../jquery.min.js"></script>
  <script src="../bootstrap.min.js"></script>
  <title>clock</title>
  <script src="class/clock.js"></script>
  <script>
  /* Define global variables */
  var myClock = clock(); 

  /* Define methods */
  //辅助方法, 获取时间字符串, 这里只包括小时与分钟, 以:分隔
  function getTimeStr(){
    var myDate = new Date();
    var hour = myDate.getHours();
    var minute = myDate.getMinutes();
    if (hour<10){
        hour = '0'+hour;
    }
    if (minute<10){
        minute = '0'+minute;
    }
    return hour+':'+minute;
  }

  /* Reply for html elements */
  //点击设置计时器按钮
  function setAlarm_click(){
    if(myClock.alarmSwitch){
        alert("闹钟已设置为"+myClock.getAlarmTimeStr()+", 若要重新设置请先取消");
        return;
    }
    var v = $("#timeSet").val();
    if(v){
        myClock.setAlarmFromStr(v);
        myClock.alarmSwitch = true;
        alert('闹钟时间设定为:'+v);
    }else{
        alert('时间设定不正确, 请重新设置!');
    }
  }

  //点击取消计时器按钮
  function cancelAlarm_click(){
    if(myClock.alarmSwitch){
        if(!confirm('确定取消计时吗?')){
            return;
        }
        myClock.alarmSwitch = false;
        alert('计时已取消!');
    }else{
        alert('计时尚未开始!');
    }
  }

  //初始设置
  function onLoad(){
    $("#timeSet").val(getTimeStr());
    //设置闹钟响时的行为
    myClock.setAlarmMethod(function(){
      document.getElementById("audio").play();
      alert("闹钟响了!!!");
    });
  }
  </script>
</head>

<body onload="onLoad();">
<section id='main' class='container'>
  <label>html5闹钟(时分)</label><br/>
  <input type="text" id="timeSet" class='form-control' style='width:200px;border:1px solid green'/>
  <br/>
  <input type="button" id="setAlarm" class="btn btn-primary" onClick="setAlarm_click();" 
    value="设置闹钟" style="width:100px;"/>
  <input type="button" id="cancelAlarm" class="btn btn-primary" onClick ="cancelAlarm_click();" 
    value="取消闹钟" style="width:100px;"/>
  <br/><br/>
  <audio controls id="audio">
    <source src="audio\clock.mp3" type="audio/mpeg">
    Your browser does not support this audio format.
  </audio>
</section>
</body>
</html>